<template>
    <div id="detail">
        <div class="detail-container">
            <el-form :model="userInfo" status-icon :rules="userInfoRules" ref="userInfo" label-width="100px" class="demo-ruleForm">
                <el-form-item class="demo-ruleForm-item" label="昵称" prop="userName">
                    <el-input type="text" v-model="userInfo.userName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item class="demo-ruleForm-item" label="性别" prop="sex">
                    <el-radio-group v-model="userInfo.sex" autocomplete="off">
                        <el-radio :label="0">保密</el-radio>
                        <el-radio :label="1">男</el-radio>
                        <el-radio :label="2">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item class="demo-ruleForm-item" label="出生日期" prop="birthday">
                    <el-date-picker
                            v-model="userInfo.birthday"
                            type="date"
                            format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期"
                            autocomplete="off"
                            validate-event
                            :picker-options="pickerOptions"
                            :clearable="false">
                    </el-date-picker>
                </el-form-item>
                <el-form-item class="demo-ruleForm-item" label="学校" prop="collegeId">
                    <el-select v-model="userInfo.collegeId" filterable placeholder="请选择学校">
                        <el-option
                                v-for="item in collegeList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="demo-ruleForm-submit">
                    <el-button type="warning" @click="submitForm('userInfo')">保存</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-divider></el-divider>
        <div class="password-container">
            <el-form :model="passForm" status-icon :rules="passrules" ref="passForm" label-width="100px">
                <el-form-item class="demo-passForm-item" label="旧密码" prop="oldpass">
                    <el-input type="password" v-model="passForm.oldpass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item class="demo-passForm-item" label="密码" prop="pass">
                    <el-input type="password" v-model="passForm.pass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item class="demo-passForm-item" label="确认密码" prop="checkPass">
                    <el-input type="password" v-model="passForm.checkPass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="danger" @click="submitForm('passForm')">修改密码</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import {getStore, setStore, removeStore, delCookie,timestampToTime} from "@/utils/util";
    import {getUserById, updateUser, changePassword} from "@/api/usersFun";
    import {selectAllCollege} from "@/api/collegeFun";
    import {signOut} from "@/api/loginFun";
    import {Encrypt} from "@/utils/AesEncryptUtil";
    import {Loading, Message, MessageBox} from 'element-ui';

    export default {
        name: "detail",
        data() {
            var validateOldPass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (value.length < 6 || value.length > 16) {
                        callback(new Error('长度在 6 到 16 个字符'));
                    }
                    callback();
                }
            };
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (value.length < 6 || value.length > 16) {
                        callback(new Error('长度在 6 到 16 个字符'));
                    }
                    if (this.passForm.checkPass !== '') {
                        this.$refs.passForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.passForm.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                },
                userInfo: {
                    userName: '',
                    sex: 0,
                    birthday: 0,
                    collegeId: ''
                },
                collegeList: [],
                userInfoRules: {
                    userName: [
                        { required: true, message: '请输入昵称', trigger: 'blur' },
                        { min: 3, max: 32, message: '长度在 3 到 32 个字符', trigger: 'blur' }
                    ],
                    collegeId: [
                        { required: true, message: '请选择学校', trigger: 'blur' }
                    ]
                },
                passForm: {
                    oldpass: '',
                    pass: '',
                    checkPass: '',
                },
                passrules: {
                    oldpass: [
                        { validator: validateOldPass, trigger: 'blur' }
                    ],
                    pass: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    checkPass: [
                        { validator: validatePass2, trigger: 'blur' }
                    ]
                }
            };
        },
        created() {
            this.getCollegeData();
            this.userInfo = getStore('userInfo')
        },
        methods: {
            getCollegeData(){
                selectAllCollege().then(res=>{
                    this.collegeList = res.data
                })
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (formName == 'userInfo') {
                            let params = {
                                id: this.userInfo.id,
                                userName: this.userInfo.userName,
                                sex: this.userInfo.sex,
                                birthday: this.userInfo.birthday,
                                collegeId: this.userInfo.collegeId
                            }
                            updateUser(params).then(res => {
                                if (res.status == 200){
                                    setStore("userInfo", res.data);
                                    window.location.reload();
                                }else {
                                    Message.error(res.message)
                                }
                            })
                        }else if (formName == 'passForm') {
                            let params = {
                                oldpass: Encrypt(this.passForm.oldpass),
                                pass: Encrypt(this.passForm.pass)
                            }
                            changePassword({
                                params: JSON.stringify(params)
                            }).then(res => {
                                if (res.status == 200){
                                    setStore("userInfo", res.data);
                                    signOut({}).then(res=>{
                                        removeStore("userInfo");
                                        delCookie("token")
                                        window.location.reload();
                                    })
                                }else {
                                    Message.error(res.message)
                                }
                            })
                        }
                    } else {
                        return false;
                    }
                });
            }
        }
    }
</script>

<style>
    #detail .detail-container, #detail .password-container{
        width: 400px;
        padding: 30px;
    }
    .demo-ruleForm-item .el-form-item__label, .demo-passForm-item .el-form-item__label {
        color: #ffffff;
    }
</style>
